<template>
  <div class="jj_box">
      <p>单价:￥{{phone_msg.price}}</p>
      <span @click.self="sub()">-</span>
      <input type="text" v-model="phone_msg.count">
      <span @click.self="sup()">+</span>
      <p>总价￥{{price}}</p>
      <div @click.self="go">加入购物车</div>
  </div>
</template>

<script>

  export default {
    data () {
      return {
          price:0,
        phone_msg:{
          id:"",
          count:0,
          price:0,
          all_count:0
        },
      }
    },
    components:{

    },
    props:["prices"],
    created:function(){
        this.getmsg()
    },
    methods:{
      //数据获取
        getmsg:function(){
          this.phone_msg.id=this.$route.query.id
          this.phone_msg.price=this.prices
        },
        getprice:function(){
          this.price=this.phone_msg.count*this.phone_msg.price
        },
        sub:function(){
          if(this.phone_msg.count>=1){
          this.phone_msg.count--
          }
          this.getprice()
        },
        sup:function(){
            this.phone_msg.count++
         this.getprice()
        },
      go:function(){
        var that=this
        var ishave=false
        var index=""
        this.getmsg()
        this.$store.state.all_msg.forEach(function(v,i){
          if(v.id&&v.id==that.phone_msg.id){
            ishave=true
            index=i
          }
        })


        if(!ishave){
          that.phone_msg.all_count=that.phone_msg.count
          if(!that.phone_msg.all_count==0){
            that.$store.state.all_msg.push(that.phone_msg)
          }

        }else{

          var count1= that.$store.state.all_msg[index].all_count
          var count2=that.phone_msg.count
          that.$store.state.all_msg[index].all_count=count1+count2
        }
        console.log(that.$store.state.all_msg);
    }
    }

  }
</script>

<style>
.jj_box{
  margin-top: 200px;
}
.jj_box input{
    text-align: center;
    width: 100px;
  }
.jj_box span{
    display: inline-block;
    line-height: 30px;
    text-align: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
  }
.jj_box p{
    margin-top: 10px;
    font-size: 20px;
    color: #f23030;
  }
.jj_box div{
  width: 200px;
  height: 50px;
  background-color: red;
  color:white;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  margin-top: 10px;
}
</style>
